<template>
  <el-container>
    <el-header class="header">
      <router-view name="header"></router-view>
    </el-header>
    <el-main class="middle">
      <router-view name="middle"></router-view>
    </el-main>
    <el-footer class="footer">
      <router-view name="footer"></router-view>
    </el-footer>
  </el-container>
</template>

<script>
import { 
  ElContainer,
  ElHeader,
  ElMain,
  ElFooter
} from 'element-plus';

export default {
  name: 'App',
  data(){
    return {
      // 用来表示是否已经登录的属性
      loggedIn: false
    }
  },
  components: {
    ElContainer,
    ElHeader,
    ElMain,
    ElFooter
  },
  created(){
    console.log( '[root created] loggedIn' , this.loggedIn );
  }
}
</script>

<style>
html { 
  font-family: 'Source Han Serif SC', 'Microsoft YaHei UI', sans-serif ; 
}
body { margin: 0; padding: 0 ; }
.header{ height: 10vh; }
.middle{ height: 80vh; }
.footer{ height: 10vh; }
</style>
